<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="600px"
    :before-close="handleClose"
    append-to-body
    title="通讯录发起聊天"
    :close-on-click-modal="false"
  >
    <div class="flexbetween mb-16">
      <el-radio-group v-model="queryParams.type" size="small" class="plainradiobtn">
        <el-radio-button :label="1" class="f-14">最近聊天</el-radio-button>
        <el-radio-button :label="2" class="f-14">好友</el-radio-button>
        <el-radio-button :label="3" class="f-14">群聊</el-radio-button>
        <el-radio-button :label="4" class="f-14">企业成员</el-radio-button>
      </el-radio-group>
      <el-input
        placeholder="昵称、备注、姓名、手机号、群名称"
        v-model="queryParams.keyword"
        class="inputsearch"
        size="small"
        style="width:230px"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <div class="txlcontent y_over">
      <div v-for="(item,index) in userList" :key="index" class="useritem flexbetween p-12 commhover" :class="{no_bordertop:index!==0}">
        <div class="flexbetween userleft">
          <img src="//wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0" alt="" class="useravatar mr-12" />
          <div class="titlebox flex pl-10">
            <div class="usertitle textover">群聊</div>
            <div class="f-12 c_666">（12）</div>
          </div>
          <div class="groupmaster f-12 flexcenter">群主</div>
        </div>
        <div class="pl-12">
          <i class="el-icon-arrow-right f-16"></i>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        type:1,
        keyword: "",
      },
      userList:[1,2,3,4,5,6,7,8,9,10]
    };
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },

    handleSubmit(){},
  },
};
</script>
<style lang="scss" scoped>
.labelbox {
  border: 1px solid rgb(240, 240, 240);
  padding: 8px;
}
.labelitem {
  display: inline-block;
  border: 1px solid #d9d9d9;
  background-color: #f5f5f5;
  padding: 4px 13px;
  line-height: 22px;
}
.txlcontent{
  height: 480px;
}
.useritem{
  border: 1px solid #e9e9e9;
}
.userleft{
  width: calc(100% - 30px);
}
.titlebox{
  width: calc(100% - 100px);
}
.usertitle{
  // width: calc(100% - );
  max-width: 80%;
}
.groupmaster{
      width: 45px;
    height: 24px;
    background: #f0f5ff;
    border-radius: 2px;
    border: 1px solid #adc6ff;
    color: #2f54eb;
}
.no_bordertop{
  border-top: none;
}
</style>